<template>
	<div class="publicpageview">
		<div class="publicformview">
			<el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
				<el-row :gutter="20">
					<el-col :span="5">
						<el-form-item label="姓名：" prop="name">
							<el-input v-model="listQuery.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="身份证号：" prop="IDCard">
							<el-input v-model="listQuery.IDCard"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<div>
							<el-button size="mini" type="primary" @click="sumbitCx">查询</el-button>
							<el-button size="mini" @click="resetTop">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div class="publitableview">
			<el-button type="primary" size="mini" @click="handleUpdate('',1)">工龄录入</el-button>
			<el-button type="primary" size="mini" @click="alldelete">批量删除</el-button>
			<el-button type="primary" size="mini" @click="handleout">导出</el-button>
			<el-table @selection-change="selectChange" max-height='500px' v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
				<el-table-column type="selection" align="center" prop="phone">
				</el-table-column>
				
				<el-table-column align="center" label="姓名" prop="renter">
				</el-table-column>

				<el-table-column align="center" label="身份证号" prop="renteridno">
				</el-table-column>

				<el-table-column align="center" label="租赁合同号" prop="contractid">
				</el-table-column>

				<el-table-column align="center" label="录入日期" prop="inputdate">
					<template slot-scope="scope">
						{{scope.row.inputdate?scope.row.inputdate.split(' ')[0]:''}}
					</template>
				</el-table-column>
				
				<el-table-column align="center" label="备注" prop="memo">
				</el-table-column>

				<el-table-column align="center" label="操作" width="280">
					<template slot-scope="scope">
						<el-button type="text" size="mini" @click="handleUpdate(scope.row.autoid,2)">修改</el-button>
						<el-button type="text" size="mini" @click="handleUpdate(scope.row.autoid,3)">详情</el-button>
						<el-button type="text" size="mini" @click="handleDelete(scope.row.autoid)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div class="publicpaginationview">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
			</div>
		</div>

		<!-- 弹窗部分 -->
		<el-dialog :title="type==1?'工龄录入':type==2?'工龄修改':'工龄详情'"
			:visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<el-form :rules='rules' :model="formData" :disabled='type==3' ref="addForm" class="demo-ruleForm" label-position="right" label-width="150px">
				<el-form-item label="类别：" prop="buyertype">
					<el-select v-model="formData.buyertype">
						<el-option label="承租人" value="承租人" key="1"></el-option>
						<el-option label="共同购房人" value="共同购房人" key="0"></el-option>
					</el-select>
				</el-form-item>
<el-form-item label="姓名：" prop="renter">
					<el-input v-model="formData.renter"></el-input>
				</el-form-item>
				<el-form-item label="身份证号：" prop="renteridno">
					<el-input v-model="formData.renteridno"></el-input>
				</el-form-item>
				<el-form-item label="租赁合同号：" prop="contractid">
					<el-input v-model="formData.contractid"></el-input>
				</el-form-item>
				<el-form-item label="录入日期：" prop="inputdate">
					<!-- <el-input v-model="formData.inputdate"></el-input> -->
					<el-date-picker
					      v-model="formData.inputdate"
					      type="datetime"
					      placeholder="选择日期时间"
					      align="right">
					    </el-date-picker>
				</el-form-item>

				<el-form-item label="备注：" prop="memo">
					<el-input v-model="formData.memo" type="textarea"
						:rows="2"></el-input>
				</el-form-item>
			</el-form>

			<div class="saveContent">
				<el-button v-if="type==3" type="primary" @click="dialogVisible = false" size="medium">返回</el-button>
				<el-button v-else type="primary" @click="save" size="medium">保 存</el-button>
			</div>

		</el-dialog>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import * as XLSX from 'xlsx'
	import {
		staffList,
		addStaffDetail,
		staffDetail,
		updStaffDetail,
		delStaffDetail,
		delMultipleStaffDetail
	} from '@/api/industry'
	export default {
		name: "AccommodationManagementGonglingguanli",

		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					IDCard:'',
					name:''
				},
				total: 0,
				options: [{
					key: "1"
				}],
				list: [],
				listLoading: false,
				dialogVisible: false,
				chaifenVisible: false,
				formData: {
					buyertype:'',
					renteridno:'',
					contractid:'',
					inputdate:'',
					memo:'',
					renter:''
				},
				rules: {
					buyertype: [
						{ required: true, message: '请选择类别', trigger: 'blur' }
					],
					renteridno: [
						{ required: true, message: '请输入身份证号', trigger: 'blur' }
					],
					contractid: [
						{ required: true, message: '请输入租赁合同号', trigger: 'blur' }
					],
					inputdate: [
						{ required: true, message: '请选择录入日期', trigger: 'blur' }
					],
					memo: [
						{ required: true, message: '请输入备注', trigger: 'blur' }
					],
					renter: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				type: '',
				cfType: '',
				autoid:'',
				arrID:[]
			};
		},

		computed: {
		},

		mounted() {
			this.staffList()
		},

		methods: {
			staffList(){
				let data = {
					IDCard:this.listQuery.IDCard,
					name:this.listQuery.name,
					pageNum:this.listQuery.pageNum,
					pageSize:this.listQuery.pageSize
				}
				this.listLoading = true;
				staffList(data).then(res=>{
					this.list = res.data.list
					this.total = res.data.total
					this.listLoading = false;
				})
			},
			save(){
				this.$refs.addForm.validate((valid) => {
				if (valid) {
					let data = {
						buyertype:this.formData.buyertype,
						renteridno:this.formData.renteridno,
						contractid:this.formData.contractid,
						inputdate:this.formData.inputdate?dayjs(this.formData.inputdate).format('YYYY-MM-DD HH:mm:ss'):'',
						memo:this.formData.memo,
						renter:this.formData.renter
					}
					if(this.type==2){
						data.autoid = this.autoid
						updStaffDetail(data).then(res=>{
							this.$message(res.message);
							this.dialogVisible = false
							this.popupreset()
						})
					}else{
						addStaffDetail(data).then(res=>{
							this.$message(res.message);
							this.dialogVisible = false
							this.popupreset()
						})
					}
				} else {
					console.log('验证失败！');
					return false;
					}
				}); 
				
				
			},
			// 重置弹窗
			popupreset() {
				this.formData.buyertype = '',
					this.formData.renteridno = '',
					this.formData.contractid = '',
					this.formData.inputdate = '',
					this.formData.memo = '',
					this.formData.renter = ''
				this.staffList()
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.staffList()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.staffList()
			},

			resetForm(val) {
				console.log("1");
				this.$refs[val].resetFields();
			},

			handleAddUser() {
				this.$router.push('chanquanziliaoluru')
			},
			handleUpdate(currentData, type) {
				console.log(currentData)
				//   一定要在打开弹窗前 再赋值 不然resetFiles没用
				this.type = type
				this.dialogVisible = true;
				this.$nextTick(() => {
					this.autoid = currentData
				});
				if (type == 2 || type == 3) {
					let data = {
						autoid: currentData
					}
					staffDetail(data).then(res => {
						console.log(res)
						this.formData = res.data
					})
				}
			},
			// 查询
			sumbitCx() {
					this.staffList()
			},
			// 重置
			resetTop() {
			this.listQuery.IDCard = '',
			this.listQuery.name = ''
			},
			handleDelete(e) {
				this.$confirm('此操作将删除该条内容，请确认是否继续操作？', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						autoid: e
					}
					delStaffDetail(data).then(res => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.popupreset()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			// 合并外层选择器
			selectChange(e) {
				console.log(e)
				this.hebingList = e
				
				let arrID = []
				e.forEach((item,index)=>{
					arrID.push(item.autoid)
				})
				this.arrID = arrID
			},
			alldelete(){
				console.log(this.arrID)
				if(this.arrID.length>0){
					let data = {
						autoid:this.arrID
					}
					delMultipleStaffDetail(data).then(res=>{
						console.log(res)
						this.$message({
							type: 'success',
							message: '操作成功'
						});
						this.staffList()
					})
				}else{
					this.$message({
						type: 'success',
						message: '请选择删除对象!'
					});
				}
			},
			
			handleout(){
				this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						IDCard:this.listQuery.IDCard,
						name:this.listQuery.name,
						pageNum:this.listQuery.pageNum,
						pageSize:99999
					}
					staffList(data).then(res=>{
						let list = res.data.list
						let outList = []
						res.data.list.forEach((item,index)=>{
							outList.push({
								'姓名':item.renter,
								'身份证号':item.renteridno,
								'租赁合同号':item.contractid,
								'录入日期':item.inputdate,
								'备注':item.roommemo1
							})
						})
						// 获取表格数据
						const data = outList;
						// 转换数据为工作表
						const worksheet = XLSX.utils.json_to_sheet(data);
						// 创建新的工作簿
						const workbook = XLSX.utils.book_new();
						// 将工作表添加到工作簿
						XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
						// 导出Excel文件
						XLSX.writeFile(workbook, '工龄管理.xlsx');
					})
					
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消导出'
					});
				});
			}
		},
	};
</script>
<style scoped>
	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	.title {
		color: #008C93;
		text-align: center;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.cfguanpian {
		padding-bottom: 20px;
		color: #008C93;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.title2 {
		color: #008C93;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.tianjiaButton {
		border: 2px solid #008C93;
		background-color: #fff;
		color: #008C93;
	}
</style>